<template>
	<div>
		<div class="main">
			<keep-alive>
				<router-view />
			</keep-alive>
		</div>

		<van-tabbar v-model="active"
								fixed
								z-index="99"
								placeholder
								active-color="#e61382">
			<van-tabbar-item icon="shop"
											 :to="{ name: 'Home' }">首页</van-tabbar-item>
			<van-tabbar-item icon="records"
											 :to="{ name: 'CateList' }">列表</van-tabbar-item>
			<van-tabbar-item icon="cart"
											 :to="{ name: 'Cart' }"
											 :badge="$store.getters.totalCount">购物车</van-tabbar-item>
			<van-tabbar-item icon="contact">我的</van-tabbar-item>
		</van-tabbar>
	</div>
</template>

<script>
export default {
	name: 'Main',
	data() {
		return {
			active: 0
		}
	},
	methods: {
		changeTabbarActive() {
			const nowPath = this.$route.path

			switch (nowPath) {
				case '/home':
					this.active = 0
					break
				case '/catelist':
					this.active = 1
					break
				case '/cart':
					this.active = 2
					break
				default:
					break
			}
		}
	},
	created() {
		this.changeTabbarActive()
	}
}
</script>

<style lang="scss" scoped>
</style>
